<template>
	<view class="shop-item">
		<view class="shop-item-top">
			<view style="width: 22px;">
				<u--image :showLoading="true" src="/static/image/shop.png" shape="circle" width="22px" height="22px"></u--image>
			</view>
			<view style="width: calc(100% - 22px);position: relative;" class="u-line-1">
				<text style="padding-left: 8rpx;font-size:28rpx">{{item.store}}</text>
				<text style="position: absolute;right: 0;color: #999;font-size: 28rpx;top: 4rpx;">待兑换</text>
			</view>
		</view>	
		<view class="shop-item-mid">
			<view style="width: 80px;">
				<u--image radius="4px" :showLoading="true" :src="item.goodsImage.split(',')[0]" width="80px" height="80px"></u--image>
			</view>
			<view class="shop-item-mid-info">
				<view class="shop-item-mid-info1 u-line-2">
					<text>{{item.goodsName}}</text>
				</view>
				<view class="shop-item-mid-info2">
					<text class="shop-item-mid-info1-points">{{item.points}}积分</text>	
					<text style="color: #999;">x1</text>	
				</view>
			</view>
		</view>	
		<view class="shop-item-bot">
			<view style="display: inline-block;margin-left: 16rpx;">
				<u-button @click="toMap(item.storeId)" color="#e1251b" text="兑换地址" size="small" shape="circle"></u-button>
			</view>
			<view style="display: inline-block;">
				<u-button @click="viewCode" color="#e1251b" text="查看券码" size="small" shape="circle"></u-button>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		name: 'NoUse',
		props: {
			item: {
				type: Object,
				default: function() {
					return {}
				},
				required: true
			}
		},
		methods: {
			viewCode() {
				this.$cuNavigateTo('/pages/exchange/code?id=' + this.item.id)
			},
			toMap(id) {
				this.$cuNavigateTo('/pages/me/shopAddress?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-item {
		border-radius: 8rpx;
		padding: $uni-padding;
		background-color: #fff;
		margin-bottom: $uni-padding;
		.shop-item-top {
			display: flex;
			align-items: center;
			overflow: hidden;
			padding-bottom: $uni-padding;
		}
		.shop-item-mid {
			display: flex;
			.shop-item-mid-info {
				width: calc(100% - 80px);
				padding-left: $uni-padding;
				padding-top: $uni-padding;
				padding-bottom: $uni-padding;
				.shop-item-mid-info1 {
					color: #333;
					font-size: 30rpx;
					line-height: 38rpx;
					margin-bottom: 12rpx;
				}
				.shop-item-mid-info2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.shop-item-mid-info1-points {
						color: $uni-color-primary;
						font-weight: bold;
					}
				}
			}
		}
		
		.shop-item-bot {
			display: flex;
			flex-direction: row-reverse;
			padding-top: $uni-padding;
			text-align: right;
		}
	}
</style>